<template>
  <div class="container">
    <el-row :gutter="20" class="marginBottom">
      <el-col :span="24">
        <el-button type="primary" @click="addSchoolHandle">添加学校</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          class="marginBottom"
        >
          <el-table-column prop="school_name" label="学校名称">
          </el-table-column>
          <el-table-column prop="address" label="学校地址"> </el-table-column>
          <el-table-column prop="area_name" label="所属区域"> </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="添加学校"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="schoolInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学校名称" prop="school_name">
          <el-input
            placeholder="请输入学校名称"
            v-model="schoolInfo.school_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校地址" prop="address">
          <el-input
            placeholder="请输入学校地址"
            v-model="schoolInfo.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属区域" prop="area_code">
          <el-select
            v-model="schoolInfo.area_code"
            placeholder="请选择学校所属区域"
            clearable
          >
            <el-option
              v-for="item in areas"
              :label="item.area_name"
              :value="item.area_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="submitState" @click="handleClose"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitSchool">
          {{ submitState ? "提交中..." : "确定" }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSchoolList, deleteSchool, addSchool } from "@/api/school/index";
import { getAreaList } from "@/api/area/index";

export default {
  name: "school",
  data() {
    return {
      tableData: [],
      queryParams: {
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
      dialogVisible: false,
      schoolInfo: {
        school_name: "",
        address: "",
        area_code: "",
      },
      areas: [],
      submitState: false,
      rules: {
        school_name: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        area_code: [
          { required: true, message: "请选择学校所属区域", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入学校地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getData() {
      this.loading = true;
      getSchoolList(this.queryParams)
        .then((result) => {
          const { total, data } = result;
          this.tableData = data;
          this.total = total;
          this.loading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.total = 0;
          this.loading = false;
        });
      getAreaList()
        .then((result) => {
          this.areas = result.data;
        })
        .catch((err) => {
          this.areas = [];
        });
    },
    handleDelete(index, row) {
      deleteSchool(row.school_id)
        .then((result) => {
          const { msg, status } = result;
          if (status == "success") {
            this.$message({
              message: "删除学校成功!",
              type: "success",
            });
          } else {
            this.$message.error(msg);
          }
          this.getData();
        })
        .catch(() => {
          this.$message.error("删除学校失败!");
        });
    },
    clearInfo() {
      for (let item in this.schoolInfo) {
        this.schoolInfo[item] = "";
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.clearInfo();
    },
    addSchoolHandle() {
      this.dialogVisible = true;
    },
    submitSchool() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.submitState = true;
          addSchool(this.schoolInfo)
            .then((result) => {
              if (result.status == "success") {
                this.$message({
                  message: "添加学校成功",
                  type: "success",
                });
              } else {
                this.$message.error(result.msg);
              }
              this.getData();
              this.submitState = false;
              this.handleClose();
            })
            .catch(() => {
              this.$message.error("添加学校失败!");
              this.submitState = false;
              this.handleClose();
            });
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss"></style>
